<template>
    <BasePanel title="行政处罚" :one="true">
        <Table
            :columns="columns"
            :row-key="record => record.id"
            :data-source="list"
            :pagination="page"
            :loading="loading"
            @change="changeHandler"
            bordered
        >
            <template #indexSlot="{ index }">{{(page.current-1)*10+index+1}}</template>
            <template #limitDateSlot="{ record: { limitStartDate, limitEndDate} }">
                {{limitStartDate}}-{{limitEndDate}}
            </template>
            <template #punishSlot="{ record:{ punishOrgan, punishNo, punishDate} }">
                <p>{{punishOrgan}}</p>
                <p>（{{punishNo}}/{{punishDate}}）</p>
            </template>
        </Table>
    </BasePanel>
</template>

<script lang="ts">
    import { defineComponent, inject, onMounted, reactive, toRefs } from 'vue';
    import { Table } from 'ant-design-vue';
    import { BasePanel } from '/@/components/panelComponent/index';

    import { getCompanyLimitApi } from '/@/api/company';  //没有接口

    const columns = [
        { title: '序号', dataIndex: 'index', width: 70, align: 'center', slots: ({ customRender: 'indexSlot' }) },
        { title: '处罚决定日期', dataIndex: 'limitArea' },
        { title: '决定文书号', dataIndex: 'limitContent' },
        { title: '行政处罚种类', dataIndex: 'punish', slots: ({ customRender: 'punishSlot' }) },
      { title: '决定机关', dataIndex: 'limitContent' },
      { title: '操作', dataIndex: 'limitContent' }
    ]
    export default defineComponent({
        components: { BasePanel, Table },
        setup() {
            const personId = inject('personId') as string;

            const config = reactive({
                columns,
                list: [],
                loading: false,
                page: {
                    total: 0,
                    current: 1
                }
            })


            const changeHandler = (pagination) => {
                const { current } = pagination;
                let { loading, list, page } = toRefs(config);
                loading.value = true;
                getCompanyLimitApi({ personId, current }).then(({ data, success }) => {
                    if(success) {
                        let { records, current, total } = data;
                        list.value = records;
                        loading.value = false;
                        page.value = {current, total};
                    }
                })
            }


            const init = () => {
                //changeHandler({current: 1});
            }

            onMounted(init)

            return {
                ...toRefs(config), changeHandler
            }
        },
    })
</script>

<style lang="less" scoped>
    .ant-tabs {
        margin-top: -60px;

        ::v-deep(.ant-tabs-nav-scroll) {
            display: flex;
            flex-direction: row-reverse;
        }
    }

</style>
